import React, { useState } from 'react'
import SimpleMDE from 'react-simplemde-editor' //导入富文本编辑器
import "easymde/dist/easymde.min.css"  //导入富文本编辑器样式
import { Tabs } from 'antd';
const { TabPane } = Tabs;



const TabList = ({ Tabfiles, onCloseTab, fileChange }) => {
    // console.log(Tabfiles)
    return (
        <div>
            <Tabs
                type="editable-card"
                onEdit={(targetKey, action) => { onCloseTab(targetKey, action) }} // 给父亲组件传值

            >
                {
                    Tabfiles.map(pane => {
                        if (pane !== undefined) {
                            return <TabPane tab={pane.title} key={pane.id} >
                                <SimpleMDE
                                    key={pane.id}
                                    value={pane.body}
                                    onChange={(value) => { fileChange(pane.id, value) }}
                                    options={{
                                        minHeight: '82vh'
                                    }}
                                />
                            </TabPane>

                        }
                    })
                }
            </Tabs>
        </div>
    )

}

export default TabList